<template>
  <div>
    <h3>state基本使用</h3>
    <div>{{ $store.state.test }}</div>
    <div>{{ test2 }}</div>
    <h3>mutations使用</h3>
    <button @click="btnClick">修改state</button>
    <h3>getters基本使用</h3>
    <div>{{ $store.getters.getTest }}</div>
    <div>{{ getTest }}</div>
    <h3>actions基本使用</h3>
    <button @click="btnClick2">调用actions</button>
    <hr />
    <h2>modules基本使用</h2>
    <h3>modules下的state基本使用</h3>
    <div>{{ $store.state.user.userInfo }}</div>
    <h3>modules下的mutations使用</h3>
    <button @click="btnClick3">修改modules下的state</button>
    <h3>modules下的getters基本使用</h3>
    <div>{{ $store.getters.getUserInfo }}</div>
    <h3>modules下的actions基本使用</h3>
    <button @click="btnClick4">actions修改modules下的state</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      test: 123
    }
  },
  computed: {
    // ...mapState(['test'])   //
    ...mapState({ test2: 'test' }), //
    ...mapGetters(['getTest'])
  },
  methods: {
    // ...mapMutations(['setTest']),
    ...mapMutations({ setTest2: 'setTest' }),
    ...mapActions(['refreshTest']),
    btnClick () {
      // this.$store.commit('setTest', Math.random() * 999)
      this.setTest2(Math.random() * 999)
    },
    btnClick2 () {
      // this.$store.dispatch('refreshTest')
      this.refreshTest()
    },
    btnClick3 () {
      this.$store.commit('setUserInfo', Math.random() * 999)
    },
    btnClick4 () {
      this.$store.dispatch('refreshUserInfo', Math.random() * 999)
    }
  }
}
</script>
<style></style>
